<template>
  <div class="delivery-note-container" ref="printRef">
    <!-- 顶部区域 -->
    <div class="header">
      <div class="qr-code-section">
        <div class="delivery-number">
          送货单号:
          <strong>{{ props.printData.deliveryInfo.deliveryCode }}</strong>
        </div>
      </div>
    </div>
    <!-- 基础信息区域 -->
    <div class="basic-info">
      <el-descriptions :column="2" class="basic-info-table">
        <el-descriptions-item label="客户名称:">
          {{ props.printData.deliveryInfo.companyName }}
        </el-descriptions-item>
        <el-descriptions-item label="送货日期:">
          {{ props.printData.deliveryInfo.deliveryDate }}
        </el-descriptions-item>
        <el-descriptions-item label="联系人:">
          {{ props.printData.deliveryInfo.contactPerson }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话:">
          {{ props.printData.deliveryInfo.contactPhone }}
        </el-descriptions-item>
        <el-descriptions-item label="送货地址:">
          {{ addressCodeFormat(props.printData.deliveryInfo.companyAddress) }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 商品明细区域 -->
    <div style="width: 100%" class="product-list">
      <el-table :data="props.printData.productList" style="width: 100%" class="print-table">
        <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
        <el-table-column prop="productName" label="商品名称" align="center"></el-table-column>

        <el-table-column prop="qty" label="数量" align="center"></el-table-column>
        <el-table-column prop="unit" label="单位" align="center">
          <template #default="scope">{{ formatUnit(scope.row.unit) }}</template>
        </el-table-column>
        <el-table-column prop="unitPrice" label="单价" align="center"></el-table-column>
        <el-table-column prop="order" label="金额" align="center">
          <template #default="scope">
            {{ (scope.row.unitPrice * scope.row.qty).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 底部签收区域 -->
    <div class="signature-area">
      <table class="signature-table">
        <tr>
          <td width="50%">
            <div class="signature-line">送货人:</div>
            <div class="signature-date">日期:</div>
          </td>
          <td width="50%">
            <div class="signature-line">收货人:</div>
            <div class="signature-date">日期:</div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import cusInfoApi from "@/api/cusManage/cusInfo";
import { formatUnit } from "@/utils/formatUnit";

import type { PropType } from "vue"; ///父组件传的值的参数类型
interface PrintDataType {
  deliveryInfo: {
    deliveryCode: string; //送货单号
    companyName: string; //客户名称
    companyCode: string; //客户编号
    companyAddress: string; //送货地址
    contactPerson: string; //联系人
    contactPhone: string; //联系电话
    deliveryDate: string; //送货日期
  };
  productList: {
    productCode: string; //商品编码
    productName: string; //商品名称
    qty: Number; //数量
    unit: string; //单位
    unitPrice: Number; //单价
  }[];
}

const props = defineProps({
  printData: {
    type: Object as PropType<PrintDataType>,
    required: true,
  },
});

//根据客户编号获取地址信息
const addressList = ref([]);
const getAddressListByCode = (companyCode: string) => {
  if (!companyCode) return (addressList.value = []);

  cusInfoApi.getAddressPage({ pageNum: 1, pageSize: 999, parentCode: companyCode }).then((data) => {
    console.log(data, "getAddressListByCode");
    addressList.value = data;
  });
};

//根据地址编号获取地址名称
const addressCodeFormat = (addressCode: string) => {
  let data: any = addressList.value?.find((item: any) => item.code == addressCode);
  console.log(addressList.value, "addressList", addressCode, "addressCode");

  if (!data) {
    return "-";
  }
  return data.address;
};
onMounted(() => {
  getAddressListByCode(props.printData.deliveryInfo.companyCode);
});
</script>
<style scoped lang="scss">
.delivery-note-container {
  margin: 0 auto;
  padding: 15px;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  color: #333;
  background-color: #fff;
  box-sizing: border-box;
}
.header {
  text-align: center;
  margin-bottom: 20px;
}
.qr-code-section {
  display: inline-block;
  text-align: center;
}
/* 删除二维码样式 */
.delivery-number {
  font-size: 16px;
}
.basic-info {
  margin-bottom: 20px;
}
.info-table {
  width: 100%;
  border-collapse: collapse;
}
.info-item {
  margin-bottom: 10px;
  font-size: 14px;
}
.info-item span {
  display: inline-block;
}
.product-details {
  margin-bottom: 30px;
}
.product-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.product-table th,
.product-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
.product-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}
.signature-area {
  margin-top: 50px;
}
.signature-table {
  width: 100%;
}
.signature-line {
  margin-bottom: 30px;
  font-size: 14px;
}
.signature-date {
  font-size: 14px;
}
strong {
  font-weight: bold;
}
@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .delivery-note-container {
    width: 100%;
    height: 100%;
    padding: 15mm;
    box-shadow: none;
  }
  .product-table th {
    background-color: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
  }
  .product-list {
    :deep(table) {
      table-layout: auto;
    }
    :deep(.el-table__header-wrapper) {
      width: 100% !important;
    }
    :deep(.el-table__header-wrapper .el-table__header) {
      width: 100% !important;
    }
    :deep(.el-table__body-wrapper) {
      width: 100% !important;
    }

    :deep(table) {
      width: 100% !important;
      table-layout: auto;
    }
  }

  @page {
    size: auto; /* auto is the initial value */
    margin: 3mm; /* this affects the margin in the printer settings */
  }
  * {
    font-weight: bold !important;
  }
  :deep(.basic-info-table .el-descriptions__cell) {
    font-weight: 700 !important;
  }
}
</style>
